<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>导航</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <link
            rel="stylesheet"
            href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"
        />
        <style>
            * {
                margin: 0 auto;
                padding: 0;
            }
            #box {
                width: 800px;
                height: 600px;
            }
            #panel {
                position: fixed;
                background-color: white;
                max-height: 90%;
                overflow-y: auto;
                top: 10px;
                right: 10px;
                width: 280px;
            }
            #panel .amap-call {
                background-color: #009cf9;
                border-top-left-radius: 4px;
                border-top-right-radius: 4px;
            }
            #panel .amap-lib-driving {
                border-bottom-left-radius: 4px;
                border-bottom-right-radius: 4px;
                overflow: hidden;
            }
            button {
                margin-top: 20px;
                padding: 5px;
                border-radius: 5px;
                background-color: aquamarine;
                border-color: aqua;
                cursor: pointer;
            }
            #bos {
                width: 250px;
                height: 250px;
                position: absolute;
                left: 50px;
                top: 30px;
                background-color: #ccc;
                border-radius: 10px;
                padding: 20px;
            }
            #bos input {
                width: 150px;
                padding: 5px;
                margin-top: 30px;
            }
            span {
                position: relative;
                top: 15px;
            }
        </style>
    </head>
    <body>
        <div id="bos">
            <span>出发点：</span><input type="text" id="cfd" /><br />
            <span>目的地：</span><input type="text" id="mdd" />
            <button style="margin-left: 80px" onclick="fun3()">
                自定义路线</button
            ><br />
            <button onclick="fun2()" style="margin-left: 70px">固定路线</button>

            <button onclick="fun()">返回</button>
        </div>
        <div id="box"></div>
        <div id="panel"></div>
    </body>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script
        type="text/javascript"
        src="https://cache.amap.com/lbs/static/addToolbar.js"
    ></script>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: '82a7f20c831d47365b8fcf9fad07e90f',
        }
    </script>
    <script
        type="text/javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=a653020510c4a20baf0acc3f377ca920&plugin=AMap.Geocoder,AMap.Driving"
    ></script>
    <script>
        let jcfd = 112.263001
        let wcfd = 34.336641
        let jmdd = 113.428155
        let wmdd = 34.774258
        var map
        $(function () {
            map = null
            fun()
        })

        function fun() {
            if (navigator.geolocation) {
                map = new AMap.Map('box', {
                    zoom: 16,
                    center: [113.428155, 34.774258],
                    viewMode: '3D',
                })
                //吾悦广场标记
                var marker = new AMap.Marker({
                    position: map.getCenter(),
                    icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
                    anchor: 'bottom-center',
                    offset: new AMap.Pixel(0, 0),
                })

                marker.setMap(map)
                marker.setTitle('吾悦广场')
                marker.setLabel({
                    direction: 'right',
                    offset: new AMap.Pixel(10, 0), //设置文本标注偏移量
                    content:
                        "<div class='info' style='width:100px;text-align:right;min-width:0'>我是吾悦广场</div>", //设置文本标注内容
                })
            }
        }
    </script>

    <script>
        var geocoder = new AMap.Geocoder({
            //   city: '010', //城市设为北京，默认：“全国”
        })
        function fun3() {
            if ($('#cfd').val() && $('#mdd').val()) {
                fun()
                let cfd = $('#cfd').val()
                let mdd = $('#mdd').val()
                geocoder.getLocation(cfd, function (status, result) {
                    if (status === 'complete' && result.geocodes.length) {
                        let lnglat = result.geocodes[0].location
                        jcfd = lnglat.lng
                        wcfd = lnglat.lat
                    } else {
                        log.error('根据地址查询位置失败')
                    }
                })
                geocoder.getLocation(mdd, function (status, result) {
                    if (status === 'complete' && result.geocodes.length) {
                        let lnglat = result.geocodes[0].location
                        jmdd = lnglat.lng
                        wmdd = lnglat.lat
                        fun2()
                    } else {
                        log.error('根据地址查询位置失败')
                    }
                })
            } else {
                alert('请输入出发点和目的地')
            }
        }
    </script>

    <script>
        function fun2() {
            fun()
            //构造路线导航类
            var driving = new AMap.Driving({
                map: map,
                panel: 'panel',
            })
            driving.search(
                new AMap.LngLat(jcfd, wcfd),
                new AMap.LngLat(jmdd, wmdd),
                function (status, result) {
                    // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
                    if (status === 'complete') {
                        log.success('绘制驾车路线完成')
                        jcfd = 112.263001
                        wcfd = 34.336641
                        jmdd = 113.428155
                        wmdd = 34.774258
                        new Lib.AMap.DrivingRender().autoRender({
                            data: result,
                            map: map,
                            panel: 'panel',
                        })
                    } else {
                        log.error('获取驾车数据失败：' + result)
                    }
                }
            )
        }
    </script>
</html>
